<template>
  <el-skeleton :loading="loading" animated>
    <template #template>
      <div class="layout">
        <div class="items">
          <el-skeleton-item class="item" v-for="item in 7" :key="item">{{ item }}</el-skeleton-item>
        </div>
      </div>
    </template>
  </el-skeleton>
</template>

<script setup>
import { ref, watch } from 'vue'

const loading = ref('')
const props = defineProps({
  isShowSkeleton: {
    type: Boolean,
    default: true
  }
})

watch(
  () => props.isShowSkeleton,
  () => {
    loading.value = props.isShowSkeleton
  }
)
</script>

<style lang="scss" scoped>
.layout {
  width: 100%;
  height: 100%;
  background-color: #fff;

  .items {
    padding: 20px 20px;
    width: 100%;
    height: 100%;

    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 20px;

    .item {
      width: 100%;
      height: 250px;
      background-color: #ccc;

      // 为特定的项添加样式
      &:nth-child(5),
      &:nth-child(6) {
        grid-column: span 2; // 跨越两列
      }

      &:nth-child(7) {
        grid-column: span 4; // 跨越三列
      }
    }
  }
}
</style>
